<template>
	<div class="poster1 poster-box">
		<div style="position: absolute;left: 0;top: 0;height: 120%;width: 100%;z-index: 0;" :style="{background: data.type == 'purity'?`${data.color}`:`linear-gradient(to bottom, ${data.color}, #ffffff)`}"></div>
		<div class="poster-box-top u-flex u-col-center">
			<imgs :layout="data.layout" :data="data.info.imgs"></imgs>
		</div>
		<div class="poster-box-container">
			<div class="poster-box-container-bottom">
				<div class="poster-box-container-title" contenteditable>{{ data.info.title }}</div>
				<div class="poster-box-container-price" contenteditable>￥{{ data.info.price }}</div>
				<div class="u-flex u-row-between u-col-center">
					<div class="">
						<div class="u-flex u-col-center" style="margin-bottom: 10px;">
							<div class="poster-box-top-img">
								<img :src="data.info.avatar" alt="">
							</div>
							<div class="poster-box-top-tips ell-2" contenteditable>{{ data.info.name }}</div>
						</div>
						<div class="poster-box-container-tips" contenteditable>
							向您推荐了一个好物<br/>
							长按识别小程序码进入
						</div>
					</div>
					<div class="poster-box-container-code u-flex-col u-col-center u-row-center">
						<img class="poster-box-container-code-logo" :src="data.info.code" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
const Imgs = VueLoader('../Imgs/index.vue')

module.exports = {
	components: {
		Imgs
	},
	name: 'Mode2',
	props: {
		data: {
			type: Object
		}
	},
	data() {
		return {
			width: 0
		}
	},
	methods: {
		save(callback) {
			callback = callback || function() {}
			this.$refs.box.createImg((base64) => {
				callback(base64)
			})
		}
	},
	mounted() {
	}
}
</script>

<style>
	.poster1.poster-box {
		position: relative;
		width: 320px;
		margin: 0 auto;
		background-color: #fff;
		overflow: hidden;
		font-family: "microsoft yahei", Helvetica, Roboto, Arial, sans-serif;
	}
	
	.poster1.poster-box * {
		font-family: "microsoft yahei", Helvetica, Roboto, Arial, sans-serif;
	}
	
	.poster1 .poster-box-top {
		position: relative;
		z-index: 2;
	}
	
	.poster1 .poster-box-top-img {
		position: relative;
		flex: 0 0 50px;
		width: 50px;
		height: 50px;
		border-radius: 100%;
		overflow: hidden;
		border: 1px solid #fff;
		margin-right: 6px;
	}
	
	.poster1 .poster-box-top-img img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}
	
	.poster1 .poster-box-top-tips {
		font-size: 14px;
		padding: 0 8px;
	}
	
	.poster1 .poster-box-container {
		position: relative;
		z-index: 2;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
		margin: -20px 10px 10px;
	}
	
	.poster1 .poster-box-container::before {
		content: '';
		display: block;
		position: absolute;
		z-index: 0;
		width: 300%;
		padding-bottom: 300%;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -140px);
		border-radius: 100%;
		background-color: #f7f7f7;
		// box-shadow: 0 0 20px #ccc;
	}
	
	.poster1 .poster-box-container-bottom {
		padding: 10px;
		position: relative;
		z-index: 2;
	}
	
	.poster1 .poster-box-container-title {
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 10px;
	}
	
	.poster1 .poster-box-container-price {
		font-size: 18px;
		color: red;
		margin-bottom: 40px;
	}
	
	.poster1 .poster-box-container-code {
		flex: 0 0 120px;
		height: 120px;
		overflow: hidden;
		border-radius: 100%;
		font-size: 0;
		line-height: 0;
		background-color: #fff;
	}
	
	.poster1 .poster-box-container-code-logo {
		width: 90%;
		height: 90%;
	}
	
	.poster1 .poster-box-container-tips {
		font-size: 14px;
		color: #ccc;
	}
</style>